<template>
  <div class="Home minScrollBarStyle">
    <!-- :getScrollInfo="getScrollInfo" -->
    <getScroll></getScroll>

    <video-container></video-container>

    <div class="communityGuide">
      <div class="communityGuideCharacter">
        <div class="communityGuideTop">
          <div class="circle"></div>
          <h1>简介说明</h1>
          <p>新的开始、新的方式下的预约与管理。</p>
        </div>
        <div class="communityGuideBottom">
          <div class="items">
            <el-tag type="info"> 便捷性和高效性 </el-tag>
            <p>
              用户通过预约系统可以随时在线查询自习室的空闲情况，避免了传统手工登记和排队的繁琐流程。这提供了更为便捷、高效的自习室利用方式，节省了用户宝贵的学习或工作时间。
            </p>
          </div>
          <div class="items">
            <el-tag type="info"> 灵活性和自主性 </el-tag>
            <p>
              预约系统使用户能够根据个人时间表和需求，灵活选择自习室的使用时间和座位，提升了使用自习室的自主性。用户可以更好地规划自己的学习计划，适应个性化的学习或工作需求。
            </p>
          </div>
          <div class="items">
            <el-tag type="info"> 实时性和透明度 </el-tag>
            <p>
              预约系统通过实时更新自习室座位情况，为用户提供了准确的信息。用户可以清晰地了解自习室的使用状况，避免了走了冤枉路或等待的时间浪费。
            </p>
          </div>
          <div class="items">
            <el-tag type="info"> 避免争夺与冲突 </el-tag>
            <p>
              在传统管理下，座位的争夺和冲突是常见的问题。通过预约系统，用户可以避免因座位问题引发的不必要的纠纷和不愉快经历，提高了自习室利用的和谐度。
            </p>
          </div>
          <div class="lastItems">
            <div class="movement">
              <span>READMORE</span>
              <span
                class="iconfont icon-jiantou_xiangyou"
                @click="routerJump('push', 'Databases')"
              ></span>
            </div>
          </div>
        </div>
      </div>
      <div class="communityGuideDescription"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IGetScrollInfo } from "@/components/UI-cnps/getScroll/type"
import videoContainer from "./cnps/home-video-container.vue"
import getScroll from "@/components/UI-cnps/getScroll/getScroll.vue"
import Earch from "@/components/page-charts/src/earch-echart.vue"
import useRouterJump from "@/hooks/useRouterJump"
import useMainStore from "@/store/main/main"
import { storeToRefs } from "pinia"
import { computed } from "vue"
const { routerJump } = useRouterJump()

// 滚动按钮配置
// const getScrollInfo: IGetScrollInfo = {

// }

// 获取随机的动物数据
const mainStore = useMainStore()
// 发起数据请求
mainStore.getRandomAnimalsAction(25)
const { randomAnimals } = storeToRefs(mainStore)
// const lastRandomAnimals = randomAnimals.value.slice(0, 7)
const lastRandomAnimals = computed(() => {
  return randomAnimals.value.slice(0, 7)
})

// const dataBaseStore = useDatabasesStore()
// 动物轮播图跳转
function goRequestAnimal(animalInfo) {
  // dataBaseStore.saveSelectAnimal(animalInfo)
  routerJump("push", "Databases")
}
</script>

<style lang="less" scoped>
.Home {
  background-color: #171719;
  overflow: hidden;
}

.video-container {
  position: relative;
  overflow: hidden;
  // height: 80vh;
}

.communityGuide {
  width: 100%;
  // height: 200px;
  margin: 20px auto 0;
  // background-color: #eee;
  .communityGuideCharacter {
    width: 100%;
    .communityGuideTop {
      width: 70%;
      height: 130px;
      color: white;
      margin: 0 auto;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      .circle {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #e96620;
      }
      h1 {
        margin-left: 20px;
        font-size: 34px;
        letter-spacing: 2px;
      }
      p {
        margin-left: 35px;
        color: #999;
      }
    }
    .communityGuideBottom {
      width: 70%;
      margin: 0 auto;
      .items {
        // height: 110px;
        // line-height: 130px;
        padding: 50px 0 30px;
        border-bottom: 0.5px dotted #e5e5e5;
        display: flex;
        p {
          margin-left: 100px;
          color: #fff;
          font-size: 17px;
          letter-spacing: 1px;
          line-height: 28px;
        }
      }
      .lastItems {
        display: flex;
        // 主轴排列方向 从右向左
        flex-direction: row-reverse;
        color: #fff;
        padding: 50px 0 30px;
        // border-bottom: 0.5px dotted #e5e5e5;
        .movement {
          margin-top: 30px;
          span {
            // 调整同行不同盒子中文本的内容不能对齐，不让其基线对齐
            vertical-align: middle;
            &:nth-child(1) {
              font-size: 18px;
              text-decoration: underline;
            }
            &:nth-child(2) {
              // 悬浮手指样式
              cursor: pointer;
              margin-left: 26px;
              font-size: 36px;
              transition: all 0.5s;
              border-radius: 50%;

              &:hover {
                background-color: #e96620;
                padding: 10px;
              }
            }
          }
        }
      }
    }
  }
  .communityGuideDescription {
    margin: 100px auto 0;
    width: 100%;
    height: 100px;
    // background-color: red;
  }
}

@keyframes move {
  0% {
  }
  100% {
    transform: translateX(-8500px);
  }
}
/* 纯css实现无缝滚动
1.一共有25张照片 每张照片300px和40的左边距 ----> 8500px
2.因为第一张照片是最左边开始的，且定义的动画是左走，如果只是循环动画
在一次循环完成后 后面会剩空白区域,如果第二次循环开始就会出现瞬间帧卡顿的现象
3.解决: 仍是循环那25张照片 只是在后面多添加几张照片，实现视差的效果
*/
</style>
